<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
<link rel="shortcut ico"  href="images/zimei.ico">
<title>发现</title>
<meta name="description" content="">
<meta name="keywords" content="">
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="lib/css/swiper.min.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/find.css" />
    

</head>
<body>
<div class="container">
<div class="header">
        <div class="top-mask">
                <img src="images/find-top-bar.jpg" alt="">
                <span class="top-tit">发现</span>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper find-top-swiper">
                <div class="swiper-slide">
                        <img src="images/fond-banner1.jpg" alt="">
                        <div class="active msg"></div>
                        <div class="slide-cont">
                            <div class="pic"><img src="images/find-top-tit1.png" alt=""></div>
                            <div class="tit">每天变白一小步<br>你将变白一大步</div>
                            <p class="f-tit">在这个冬天遇到你的男神</p>
                        </div>
                </div>
                <div class="swiper-slide"><img src="images/fond-banner1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/fond-banner1.jpg" alt=""></div>
            </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination f-btn"></div>
</div>
</div>
<div class="top-main">
    <ul >
        <li><a href="#" class="cont">
            <p class="pic"><img src="images/top-main1.jpg" alt=""></p>
            <p class="tit">免费试用</p>
        </a></li>
         <li><a href="#">
            <p class="pic"><img src="images/top-main2.jpg" alt=""></p>
            <p class="tit">有奖活动</p>
        </a></li>
         <li><a href="#">
            <p class="pic"><img src="images/top-main3.jpg" alt=""></p>
            <p class="tit">热门话题</p>
        </a></li>
         <li><a href="#">
            <p class="pic"><img src="images/top-main4.jpg" alt=""></p>
            <p class="tit">白菜好物</p>
        </a></li>
    </ul>
</div>
<div class="find-cont">
<div class="wrapper">
    <div class="c-top-bg"></div>
    <div class="cont-top">
        <div class="c-left">
            <p class="pic"><img src="images/find-cont1.jpg" alt=""></p>
            <p class="tit">凯凯迪yy<br><span>编辑精选</span></p>
        </div>
        <div class="c-right"><a href="#">关注</a></div>
    </div>
    <div class="cont-pic"><img src="images/find-cont2.jpg" alt=""></div>
    <h3>凯凯迪yy今日推荐</h3>
    <p class="recommend-cont">给大家推荐一款睫毛膏，韩国整容一条街秘传电眼“嫁接”术，害美
睫师失业的罪魁祸首，就是bonisha嫁接睫毛膏！海胆头360°广角
随意刷，自带百万纤维拉长美睫</p>
    <ul class="evaluate">
        <li><a href="#"><img src="images/evaluate01.png" alt=""></a><span class="num">15</span></li>
        <li><a href="#"><img src="images/evaluate02.png" alt=""></a><span class="num">5</span></li>
        <li><a href="#"><img src="images/evaluate03.png" alt=""></a><span class="num">3</span></li>
        <li><a href="#"><img src="images/evaluate04.png" alt=""></a><span class="num">9</span></li>
    </ul>
</div>
<div class="c-line"></div>
</div>
<div class="correlation">
    <div class="wrapper">
            <h3>相关推荐</h3>
            <ul class="list">
                <li><a href="#">菲诗小铺(The Face Shop)黑杆防水<span class="span price">￥69.00</span><em>&gt;</em></a></li>
                <li><a href="#">玛丽黛佳(Marie Dalgar)黑流苏密语<span class="span price">￥89.00</span><em>&gt;</em></a></li>
                <li><a href="#">悦诗风吟(innisfree)纤巧精细睫毛膏<span class="span price">￥59.00</span><em>&gt;</em></a></li>
            </ul>
    </div>
    <div class="c-line"></div>
</div>
<!-- footer 开始 -->
    <footer>
        <ul>
            <li>
                <a href="index.html">
                    <i class="iconfont icon-shouyeshouye"></i>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="classify.html">
                    <i class="iconfont icon-fenlei"></i>
                    <p>分类</p>
                </a>
            </li>
            <li>
                <a class="cur" href="find.html">
                    <i class="iconfont icon-faxian"></i>
                    <p>发现</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-gouwuche"></i>
                    <p>购物车</p>
                </a>
            </li>
            <li>
                <a href="myCenter.html">
                    <i class="iconfont icon-iconfontwode"></i>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </footer>
<!-- footer 结束 -->
</div>
 <script src="js/screenresize.js"></script>
    <script src="lib/js/zepto.min.js"></script>
    <script src="lib/js/swiper.min.js"></script>
    <script src="js/find.js"></script>
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // autoplay: 3000,  //可选选项，自动滑动
    loop: true,
    speed:500,
    autoplayDisableOnInteraction : false,
    paginationClickable :true,
    direction : 'horizontal',

    // 如果需要分页器
    pagination: '.swiper-pagination'
    
  })        
  </script>

</body>
</html>